import React, { useState, useEffect } from 'react'
import { Icon } from 'react-vant';
import '../App.css'
import { Tabs } from 'react-vant';//tab切换
import { Swipe } from 'react-vant';//轮播图
import axios from '../utils/request'
import bedonce from '../utils/bedonce'
import { PullRefresh } from 'react-vant';


export default function Scope(props) {
    //下拉刷新
    const onRefresh = () => {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(true);
                // console.log('1');
                rd()
            }, 1000);
        });
    };

    //渲染热点
    const [list, setList] = useState([])
    useEffect(() => {
        rd()
    }, [])

    const rd = () => {
        axios.post('/api/getList').then(res => {
            // console.log(res);
            setList([...res.data.data])
        })
    }
    //渲染睡眠
    const [shui, setShui] = useState([])
    useEffect(() => {
        axios.post('/api/shuiList').then(res => {
            // console.log(res);
            setShui([...res.data.data])
        })
    }, [])


    //渲染生活
    const [sheng, setSheng] = useState([])
    useEffect(() => {
        axios.post('/api/shengList').then(res => {
            // console.log(res);
            setSheng([...res.data.data])
        })
    }, [])

    //渲染话题
    const [huati, setHuati] = useState([])
    useEffect(() => {
        axios.post('/api/huaList').then(res => {
            // console.log(res);
            setHuati([...res.data.data])
        })
    }, [])

    //渲染男性
    const [nan, setNan] = useState([])
    useEffect(() => {
        axios.post('/api/nanList').then(res => {
            // console.log(res);
            setNan([...res.data.data])
        })
    }, [])

    //全部筛选
    const quanbu = () => {
        axios.post('/api/huaList').then(res => {
            // console.log(res);
            setHuati([...res.data.data])
        })
    }
    //简答筛选
    const jian = () => {
        axios.post('/api/shai', { val: "简答" }).then(res => {
            // console.log(res);
            setHuati([...res.data.data])
        })
    }
    //语音筛选
    const yuyan = () => {
        axios.post('/api/shai', { val: "语音" }).then(res => {
            // console.log(res);
            setHuati([...res.data.data])
        })
    }
    //图文筛选
    const tuwen = () => {
        axios.post('/api/shai', { val: "图文" }).then(res => {
            // console.log(res);
            setHuati([...res.data.data])
        })
    }

    //热点搜索
    const Search = (e) => {
        bedonce(() => {//防抖机制
            axios.post('/api/search', { value: e }).then(res => {
                setList([...res.data.data])
            })
            axios.post('/api/smsearch', { value: e }).then(res => {
                setShui([...res.data.data])
            })
            axios.post('/api/shsearch', { value: e }).then(res => {
                setSheng([...res.data.data])
            })
            axios.post('/api/htsearch', { value: e }).then(res => {
                setHuati([...res.data.data])
            })
            axios.post('/api/nxsearch', { value: e }).then(res => {
                setNan([...res.data.data])
            })
        }, 1000)
    }
    //热点详情
    const tohotspot = (item) => {
        props.history.push(`/hotspotdetail/${item.id}`)
    }

    return (
        <div className="wrap">
            <header>
                <div className="head">
                    <Icon name="search" />
                    <input type="text" placeholder="输入关键字搜索科普文章" onChange={(e) => Search(e.target.value)} />
                </div>
            </header>
            <main>
                <div className="tab">
                    <Tabs active="active" titleActiveColor="green" color="green" swipeable sticky offsetTop="49.95px">
                        <Tabs.TabPane title="热点">
                            <div className="tab1">
                                <Swipe className="my-swipe" autoplay={2000}>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2021/09/24/fb0f/93c724c89287_w526_h368_.png?imageView2/1/w/120/h/116" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2021/06/07/76cc/06cd3831da2e_w600_h315_.png?imageView2/1/w/120/h/116" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2018/09/27/667c/3652b720f6e8_w180_h150_.jpg" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2019/07/08/760f/35524d2044d0_w180_h150_.jpg?imageView2/1/w/120/h/116" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2021/07/13/535e/bb64178619f1_w1300_h420_.png" alt="" /></Swipe.Item>
                                </Swipe>

                                <PullRefresh successText="刷新成功" onRefresh={onRefresh}>
                                    {
                                        list.map((item, index) => {
                                            return <div className='kepu' key={item.id} onClick={() => { tohotspot(item) }} >
                                                <div className="kp">
                                                    <img src={item.img} alt="" />
                                                    <div className="kp1">
                                                        <p>{item.introduce}</p>
                                                        <div className="kp2">
                                                            <div className="kp21">
                                                                <span>生活</span>
                                                                <span>10月14日</span>
                                                            </div>
                                                            <div className="kp22">
                                                                <span>阅读{item.num}</span>
                                                                <span>赞{item.price}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        })
                                    }
                                </PullRefresh>

                            </div>
                        </Tabs.TabPane>
                        <Tabs.TabPane title="话题">
                            <div className="tab1">
                                <div className="shaixuan">
                                    <span><Icon name="award-o" onClick={quanbu} />全部</span>
                                    <span><Icon name="award-o" onClick={jian} />简答</span>
                                    <span><Icon name="award-o" onClick={() => { yuyan() }} />语音</span>
                                    <span><Icon name="award-o" onClick={() => { tuwen() }} />图文</span>
                                </div>
                                {
                                    huati.map((item, index) => {
                                        return <div className='ht' key={item.id} >
                                            <div className="ht1">
                                                <img src={item.img} alt="" />
                                                <div className="ht11">
                                                    <p>
                                                        <b>{item.name}</b>
                                                        <span>{item.style}</span>
                                                        <span>主治医师</span>
                                                    </p>
                                                    <p>
                                                        <i>原创</i>
                                                        <s>{item.date}</s>
                                                    </p>
                                                </div>
                                            </div>
                                            <div className="ht2">
                                                <p>{item.title}</p>
                                                <p>{item.introduce}</p>
                                            </div>
                                            <div className="ht3">
                                                <div className="ht32">
                                                    <Icon name="award-o" />
                                                    <span className="jian">{item.xuan}</span>
                                                </div>
                                                <div className="ht31">
                                                    <span>阅读{item.num1}</span>
                                                    <span>赞{item.num2}</span>
                                                </div>
                                            </div>
                                        </div>
                                    })
                                }
                            </div>
                        </Tabs.TabPane>
                        <Tabs.TabPane title="生活">
                            <div className="tab1">
                                <Swipe className="my-swipe" autoplay={2000}>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2020/03/23/f67c/ef22718af743_w560_h260_.png" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2021/08/06/4278/6e94124ce90b_w180_h150_.jpg" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2021/08/05/85f5/9b7e8ccdcc68_w180_h150_.jpg" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2021/08/05/e350/bca0fe85805a_w600_h338_.jpg" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://resource.chunyu.mobi/@/media/images/2016/06/17/6ba1e94dd946_w180_h150_.jpg" alt="" /></Swipe.Item>
                                </Swipe>
                                {
                                    sheng.map((item, index) => {
                                        return <div className='kepu' key={item.id}>
                                            <div className="kp">
                                                <img src={item.img} alt="" />
                                                <div className="kp1">
                                                    <p>{item.title}</p>
                                                    <div className="kp2">
                                                        <div className="kp21">
                                                            <span></span>
                                                            <span>{item.date}</span>
                                                        </div>
                                                        <div className="kp22">
                                                            <span>阅读{item.num1}万</span>
                                                            <span>赞{item.num2}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    })
                                }
                            </div>
                        </Tabs.TabPane>
                        <Tabs.TabPane title="睡眠">
                            <div className="tab1">
                                <Swipe className="my-swipe" autoplay={2000}>
                                    <Swipe.Item><img src="https://resource.chunyu.mobi/@/media/images/2017/12/08/a61e/7a8538a570c2_w180_h150_.jpg" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://resource.chunyu.mobi/@/media/images/2018/04/24/752a/afd5bc310de0_w180_h150_.jpg" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2019/08/16/89f9/0b92f9eaa114_w550_h366_.jpg" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://resource.chunyu.mobi/@/media/images/2017/11/08/54db/76a9cc399c68_w180_h150_.jpg" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://resource.chunyu.mobi/@/media/images/2018/03/09/165a/0f383bf731fc_w180_h150_.jpg" alt="" /></Swipe.Item>
                                </Swipe>
                                {
                                    shui.map((item, index) => {
                                        return <div className='kepu' key={item.id}>
                                            <div className="kp">
                                                <img src={item.img} alt="" />
                                                <div className="kp1">
                                                    <p>{item.title}</p>
                                                    <div className="kp2">
                                                        <div className="kp21">
                                                            <span></span>
                                                            <span>{item.date}</span>
                                                        </div>
                                                        <div className="kp22">
                                                            <span>阅读{item.num1}万</span>
                                                            <span>赞{item.num2}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    })
                                }
                            </div>
                        </Tabs.TabPane>
                        <Tabs.TabPane title="男性">
                            <div className="tab1">
                                <Swipe className="my-swipe" autoplay={2000}>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2021/09/24/fb0f/93c724c89287_w526_h368_.png?imageView2/1/w/120/h/116" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2021/06/07/76cc/06cd3831da2e_w600_h315_.png?imageView2/1/w/120/h/116" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2018/09/27/667c/3652b720f6e8_w180_h150_.jpg" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2019/07/08/760f/35524d2044d0_w180_h150_.jpg?imageView2/1/w/120/h/116" alt="" /></Swipe.Item>
                                    <Swipe.Item><img src="https://resource.chunyu.mobi/@/media/images/2017/11/27/8916/df7f04245df5_w180_h150_.jpg?imageView2/1/w/120/h/116" alt="" /></Swipe.Item>
                                </Swipe>
                                {
                                    nan.map((item, index) => {
                                        return <div className='kepu' key={item.id}>
                                            <div className="kp">
                                                <img src={item.img} alt="" />
                                                <div className="kp1">
                                                    <p>{item.title}</p>
                                                    <div className="kp2">
                                                        <div className="kp21">
                                                            <span></span>
                                                            <span>{item.date}</span>
                                                        </div>
                                                        <div className="kp22">
                                                            <span>阅读{item.num1}万</span>
                                                            <span>赞{item.num2}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    })
                                }
                            </div>
                        </Tabs.TabPane>
                    </Tabs>
                </div>
            </main>
        </div>
    )
}
